<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/taglibs.jsp"%>
<style type="text/css">
 .fl{
   float:left;
 }
 .ImageCount{
   float:right;
 }
 .clear{
   clear:both;
 }
 .picListDiv{
    background-color: #FFFFFF;
    border: 1px solid #696969;
    overflow: auto;
	margin-top:8px;
    padding: 8px;
 }
 .ImageSection{
    border: 1px solid #9999CC;
    display: table;
    height: 98px;
    margin-right: 15px;
    width: 98px;
}
.picselImgTitle {
    background-color: #CCCCFF;
    height: 18px;
    margin-right: 15px;
    margin-top: 2px;
    padding-top: 1px;
    width: 100px;
}
.ImageSection div{
    left: -50%;
    text-align: center;
    top: -50%;
}
</style>
<script type="text/javascript">
   (function(){	   
	   popWnd.ready('uploadDiv','Upload Image');
	   
	 
   })();
</script> 
<div class="picPanel-head"><h2 class="lst" style="padding:0 5px 5px;">Bring your item to life with pictures</h2></div>
<div class="addPic">
  <div class="fl" style="margin:0 5px 5px;">
    <input type="button" title="Add pictures" onkeydown="return false;" onclick="popWnd.show();return false;" class="button" value="Add pictures" name="addPicturesBtn" id="addPicturesBtn">
  </div>
  <div class="ImageCount" id="imageCountTxt">Your pictures: <span id="imageCount">1</span> | 8 can be added</div>
  <div class="clear"></div>
   <div class="picListDiv">   
    <table cellspacing="0" cellpadding="0" border="0" summary="">
	  <tbody>	   
	    <tr id="picsFilmstrip_row_1">
	       <c:forEach var='cnt' begin='1' end='8'>	
			   <td valign="top" style="">
			      <div class="picSerialNumber" id="picnum_<c:out value='${cnt}'/>"><c:out value='${cnt}'/></div>
			      <div class="ImageSection">
				     <div><img border="0" align="middle" id="selImg<c:out value='${cnt}'/>" style="width:98px;height:98px" src="#" title="Photo" alt="Photo"></div>
				  </div>
				  <div id="selImgTitle<c:out value='${cnt}'/>" class="picselImgTitle">
					  <span class="moveLeft">
					  	 <img border="0" src="/img/icon/iconInactMoveLt_16x16.gif" title="&nbsp;" alt="&nbsp;">
					  </span>
					  <span class="moveRight"><img border="0" id="moveright0" src="/img/icon/iconInactMoveRt_16x16.gif" title="&nbsp;" alt="&nbsp;">
					  </span>
					  <span class="removeImage"><img border="0" onclick="popWnd.init('uploadDiv', 'Upload Image');return false;" id="removeimage<c:out value='${cnt}'/>" style="cursor: pointer;" 
					      src="/img/icon/iconTrashcan_16x16.gif" title="Remove" alt="Remove">
					  </span>
				  </div>
			   </td>
		   </c:forEach>
		</tr>
	  </tbody>
	</table>
  </div>
</div>  
   